<template>
  <tn-navbar fixed frosted-glass>waterFall瀑布流</tn-navbar>

  <view class="water-fall__container">

    <tn-water-fall
      v-model="goodsData"
    >
      <template v-slot:left="{ data }">
        <goods-card
          v-for="(item, index) in data"
          :key="index"
          :data="item"
        ></goods-card>
      </template>
      <template v-slot:right="{ data }">
        <goods-card
          v-for="(item, index) in data"
          :key="index"
          :data="item"
        ></goods-card>
      </template>
    </tn-water-fall>

    <tn-load-more :status="loadingStatus"></tn-load-more>

  </view>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
  import { ref, CSSProperties, computed } from 'vue'
import { docContent } from './lib/doc'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import {
  LoadMoreStatus
} from '@/tuniao-ui/types/tn-load-more'

import TnNavbar from '@/tuniao-ui/components/tn-navbar/src/Navbar.vue'
import TnWaterFall from '@/tuniao-ui/components/tn-waterfall/src/WaterFall.vue'
import TnLoadMore from '@/tuniao-ui/components/tn-load-more/src/LoadMore.vue'
import GoodsCard from './lib/component/GoodsCard.vue'

import useSystemInfo from '@/tuniao-ui/libs/hooks/useSystemInfo'
import {
  getRandom,
  deepClone
} from '@/tuniao-ui/utils'

import {
  GoodsData
} from './lib/types'
import { 
  loadGoodsData
 } from './lib/demoData'
import { onReachBottom } from '@dcloudio/uni-app'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

const { customNavbar } = useSystemInfo()

// 加载状态
let loadingStatus = ref<LoadMoreStatus>('nomore')

// 商品数据
let currentPage: number = 1
let goodsData = ref<GoodsData[]>([])
const generateGoodData = () => {
  if (currentPage > 10) {
    loadingStatus.value = 'nomore'
    return
  }
  loadingStatus.value = 'loading'
  // 每次新增10条数据
  const currentDataLength: number = goodsData.value.length
  const data: GoodsData[] = []
  for (let i = 0; i < 10; i++) {
    const index = getRandom(0, loadGoodsData.length - 1, true)
    data.push({
      id: currentDataLength + i,
      ...(deepClone(loadGoodsData[index]) as Omit<GoodsData, 'id'>)
    })
  }
  goodsData.value = goodsData.value.concat(data)
  loadingStatus.value = 'loadmore'
}

generateGoodData()

onReachBottom(() => {
  currentPage++
  generateGoodData()
})
</script>

<style lang="scss" scoped>

  .water-fall__container {
    width: 100%;
    padding: 30rpx;
    padding-bottom: 100rpx;
  }
</style>
